<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>规格</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/layui.css" rel="stylesheet" />
	<link href="/node_modules/LobsterUIFrame/layuiadmin/style/admin.css" rel="stylesheet" />
	<link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/modules/layui-icon-extend/iconfont.css"
		rel="stylesheet" />
	<script src="/node_modules/LobsterUIFrame/layuiadmin/layui/layui.js"></script>
	<style>

	</style>
</head>

<body>
	<div class="layui-fluid">
		<div class="layui-card">
			<!-- <div class="layui-form layui-card-header layuiadmin-card-header-auto">
				<div class="layui-input-inline">
					<label class="layui-form-label">规格说明：</label>
					<div class="layui-input-inline">
						<input type="text" name="SpecItemName" id="SpecItemName" placeholder="请输入规格说明"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-input-inline">
					<button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-app-front-search"
						id="btnSearch">
						<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查询
					</button>
				</div>
			</div> -->

			<div class="layui-card-body">
				<script id="toolbar" type="text/html">
		                <div class="layui-btn-group">
		                    <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</button>
		                </div>
		        </script>
				<table id="dataTable" lay-filter="dataTable"></table>
			</div>
		</div>
	</div>

	<script type="text/html" id="option">
		<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
	</script>
</body>

</html>

<script>
	layui.config({
		base: '/node_modules/LobsterUIFrame/layuiadmin/' //静态资源所在路径
	}).extend({
		index: 'lib/index' //主入口模块
	});

	layui.define(['index', 'layer', 'form', 'element', 'table', 'tree'], function () {
		var layer = layui.layer;
		var form = layui.form;
		var element = layui.element;
		var table = layui.table;
		var $ = layui.$;
		var admin = layui.admin;
		var setter = layui.setter;
		var tree = layui.tree;


		var controller = {
			data: {
				datatable: null,
				layerindex: 0,
				model: {},
				goods: { GoodsId: -1, GoodsName: '测试商品' },
				cid: -1,
			},
			//初始化页面
			initpage: function () {
				var self = this
				if (parent.modelData) {
					self.data.goods = parent.modelData
				}
				this.initevent(function () {

					self.datatableLoad();
				});

			},
			getbaseurl: function (fun) {
				var url = "/lowcode/APP20200616102057595/shop/?view=layui&fun=" + fun;
				return url;
			},
			//打开弹层
			openlayer: function (title, elem, successfunction, yesfunction, width, height) {
				var self = this;
				layer.open({
					type: 2
					, title: title
					, content: elem
					, maxmin: true
					, area: [width, height]  //宽，高
					, btn: ['保存', '取消']
					, success: function (layero, index) {
						if (successfunction) {
							successfunction();
						}
					}
					, btn2: function (index, layero) {
						$("#LAY-app-form-reset").trigger('click');
					}
					, cancel: function () {
						$("#LAY-app-form-reset").trigger('click');
					}
					, yes: function (index, layero) {
						self.data.layerindex = index;
						getResult((field) => {
							console.log(field)
							if (field != null) {
								layer.msg('正在处理，请稍候', { icon: 16, time: 0, shade: [0.3, '#393D49'] });
								if (yesfunction) {
									yesfunction(field);
								}
							}
						})
					}
				});
			},
			//关闭弹层
			closelayer: function () {
				layer.close(this.data.layerindex);
			},
			//初始化事件
			initevent: function (func) {
				var self = this;
				var url = this.getbaseurl("Mall.getbaseinfo");
				admin.req({
					url: url,  //控制器名称，方法名称
					data: {},
					done: function (res) {
						self.data.baseinfo = res.data;
						if (func) {
							func();
						}
					}
				});
				//查找reload,通过条件，查询网格的table重载数据显示到界面
				form.on("submit(LAY-app-front-search)", function (data) {
					self.datatableLoad()
				});

				table.on('toolbar(dataTable)', function (obj) {
					console.log('table.on')
					switch (obj.event) {
						case 'add':
							console.log('add')
							self.addproduct();
							break;
					};
				});

				//监听行工具事件
				table.on('tool(dataTable)', function (obj) {  //tool是工具条事件名，table原始容器的属性
					var data = obj.data;//当前行数据
					var layEvent = obj.event;//获得lay-event的值
					if (obj.event === "edit") {
						self.editproduct(data);
					}
					if (obj.event === "delete") {
						layer.confirm("确认删除么?", { icon: 3, title: "提示" },
							function (index) {
								self.data.layerindex = index;
								self.deletegoodsSpecdetail(data);
							});
					}
				});

			},
			datatableLoad: function () {
				var self = this;
				var Name = $("#SpecItemName").val();
				self.data.dataTable = table.render({
					elem: "#dataTable",
					where: {
						goodsid: self.data.goods.GoodsId
					},
					toolbar: '',
					url: self.getbaseurl("Mall.getproduct"),
					height: "full-50",
					size: '10',
					toolbar: '#toolbar',
					page: true, //开启分页 
					loading: true,
					cols: [
						[
							{ field: 'GoodsName', title: '产品', width: '15%' },
							{ field: 'ProductSpec', title: '产品规格', width: '15%' },
							{ field: 'GoodsStock', title: '库存', width: '10%' },
							{ field: 'GoodsMarketPrice', title: '市场价', width: '10%' },
							{ field: 'GoodsRetailPrice', title: '零售价', width: '10%' },
							{
								field: 'GoodsSpecImg', title: '规格图', width: '15%', templet: function (d) {
									if (d.GoodsSpecImg) {
										return '<img class="mainpic" src="' + d.GoodsSpecImg + ' " style="width: 40px; height: 40px;" />';
									} else {
										return ""
									}
								}
							},
							{ field: 'operation', title: '操作', toolbar: '#option', width: '15%', fixed: 'right' }
						]
					],
					done: function (res) {
						console.log(res)
						self.data.tabledata = res.data
					}
				});
			},

			//添加
			addproduct: function () {
				var self = this;
				window.modelData = { 
					GoodsId: self.data.goods.GoodsId, 
					GoodsName: self.data.goods.GoodsName,
					GoodsSpecImg:self.data.goods.GoodsMainPic
				 };
				self.openlayer("新增产品", 'productadd.html', null, function (field) {
					self.addproductsave(field);
				}, '60%', '80%');
			},
			//编辑
			editproduct: function (row) {
				var self = this;
				window.modelData = row;
				self.openlayer("编辑产品", 'productedit.html', null, function (field) {
					self.editproductsave(field);
				}, '50%', '80%');
			},
			//保存
			editproductsave: function (field) {
				var self = this;
				console.log(249)
				var url = self.getbaseurl("Mall.editproductsave");
				admin.req({
					type: 'post',
					url: url,
					data: field,
					done: function (obj) {
						layer.msg("保存成功");

						self.datatableLoad();
						self.closelayer(); //关闭弹层
					}
				});
			},
			addproductsave: function (field) {
				var self = this;
				console.log(249)
				var url = self.getbaseurl("Mall.addproduct");
				field.goodsSpec = JSON.stringify(field.goodsSpec)
				admin.req({
					type: 'post',
					url: url,
					data: field,
					done: function (obj) {
						layer.msg("保存成功");

						self.datatableLoad();
						self.closelayer(); //关闭弹层
					}
				});
			},
			//删除
			deletegoodsSpecdetail: function (data) {
				var self = this;
				var url = self.getbaseurl("Mall.deletegoodsSpecdetail");
				admin.req({
					type: "post",
					url: url,
					data: {
						model: JSON.stringify(data)
					},
					done: function (res) {
						self.datatableLoad();
						self.closelayer(); //关闭弹层
					}
				});
			}

		}

		/*
		* 入口
		*/
		controller.initpage();
	});

</script>